<!-- home -->
<template>
  <div id="home" v-loading="loading">
    <ch-poster :setPoster="list" @menuClick="menuClick">
      <ch-search slot="search" @getId="id => this.searchId = id" @search-click="searchDetail"></ch-search>
    </ch-poster>
    <div class="introHead" v-if="userId"><span>心选</span></div>
    <div class="content" id="recommend">
      <div v-for="(item,index) in recommendIntro" :key="index" v-if="userId">
        <ch-intro class="item" :image="item.image" :data="item.data" :tag="item.tag" :title="item.title" @introClick="introClick" @tagClick="tagClick"></ch-intro>
      </div>
    </div>
    <div class="introHead" v-if="total != 0"><span>所有化妆品</span></div>
    <div class="content" id="content" v-loading="loading">
      <div v-for="(item,index) in intro" :key="index" v-if="total != 0">
        <ch-intro class="item" :image="item.image" :data="item.data" :tag="item.tag" :title="item.title" @introClick="introClick" @tagClick="tagClick"></ch-intro>
      </div>
      <div v-if="total == 0" class="searchNone">
        <img :src="searchNone">
        <p>找不到数据了...</p>
      </div>
    </div>
    <div style="width: 85vw">
      <el-pagination
        ref="pagination"
        v-show="total !== 0"
        class="pagination"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="20"
        :current-page="pagination"
        @current-change="getDetailList"
        @prev-click="getDetailList"
        @next-click="getDetailList"
      >
      </el-pagination>
    </div>
    <!-- <ch-head class="head"></ch-head> -->
    <el-backtop target=".content"></el-backtop>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      userId: '',
      searchId: '',
      search: '',
      searchClassify: '',
      searchNone: require('@a/img/intro/default.png'),
      list: {
        title: 'C H O I C E',
        background: [
          require('@a/img/login/bk1.jpg'),
          require('@a/img/login/bk2.jpg')
          // require('@a/img/login/bk3.jpg')
        ]
      },
      tab: 'first',
      intro: [],
      recommendIntro: [],
      total: 0,
      pagination: 1
    }
  },
  methods: {
    getDetailList(page) {
      this.loading = true
      this.$get('/parameter/detail-list', {
        title: this.search,
        classify: this.searchClassify,
        total: 20,
        pagination: page || 1
      }).then(res => {
        this.intro = []
        this.$nextTick(() => {
          this.total = res.data.total
          this.pagination = res.data.pagination
        })
        if (res.data.total === 0) return
        res.data.list.forEach(item => {
          let classify = JSON.parse(item.classify).filter(item => {
            return item.key == ('功效' || item.key == '色系' || item.key == '类别' || item.key == '妆效' || item.key == '适合人群') && (item.value != '其他')
          })
          let tag = classify.map(item => {
            if (item.value === '其他') {
              return null
            }
            return {
              name: item.value,
              value: item.value,
              key: item.key
            }
          })
          let intro = {
            title: item.title,
            image: item.picture,
            data: item,
            tag
          }
          this.intro.push(intro)
          window.scrollTo(0, document.getElementById('content').offsetTop - 100)
        })
      }).finally(() => {
        this.loading = false
        this.searchClassify = ''
        this.$route.query.searchClassify = ''
      })
    },
    getRecommendList() {
      this.loading = true
      this.$get('/parameter/detail-recommend', {
        userId: this.userId
      }).then(res => {
        res.data.forEach(item => {
          let classify = JSON.parse(item.classify).filter(item => {
            return item.key == ('功效' || item.key == '色系' || item.key == '类别' || item.key == '妆效' || item.key == '适合人群') && (item.value != '其他')
          })
          let tag = classify.map(item => {
            if (item.value === '其他') {
              return null
            }
            return {
              name: item.value,
              value: item.value,
              key: item.key
            }
          })
          let intro = {
            title: item.title,
            image: item.picture,
            data: item,
            tag
          }
          this.recommendIntro.push(intro)
          window.scrollTo(0, document.getElementById('recommend').offsetTop - 100)
        })
      })
    },
    searchDetail(item) {
      this.search = item
      this.getDetailList(1)
    },
    test() {
      console.log('1')
    },
    menuClick(index) {
      console.log(index)
      // if (index === 2) {
      //   this.$router.push('/profile')
      // }
    },
    tagClick(url) {
      console.log(url)
    },
    introClick(data) {
      console.log(data)
      this.$router.push({
        path: '/cosmeticsDetail',
        query: {detailId: data.detail_id}
      })
    },
    getSearch(self) {
      this.searchId = self
    }
  },
  created() {
  },
  mounted() {
    this.userId = this.$store.state.userInfo.id
    this.searchClassify = this.$route.query.searchClassify
    this.getDetailList()
    this.getRecommendList()
  }
}
</script>
<style lang='scss' scoped>
@import '@a/scss/base.scss';

.introHead {
  position: relative;
  left: -1vw;
  width: 80vw;
  margin: 20px auto 0;
  border-bottom: solid 2px #ee3f4d;

  span {
    font-family: 'PingFang SC';
    font-size: 26px;
    font-weight: 300;
    line-height: 45px;
  }
}

.content {
  margin: 10px auto 0;
  width: 85vw;

  display: flex;
  justify-content: start;
  flex-flow: row wrap;
  .item {
    margin: 0 30px;
  }
  .searchNone {
    margin: 20px auto 50px;
    img {
      height: 300px;
    }
    p {
      font-family: 'PingFang SC';
      font-size: 30px;
      font-weight: 300;
      color: #666;
      text-align: center;
    }
  }
}
.pagination {
  margin: 10px 0 30px;
  float: right;
}
</style>
